import 'package:childrenapp/details.dart';
import 'package:childrenapp/settlement.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(children: [
        Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: EdgeInsets.only(
                    left: 20,
                  ),
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(245, 245, 245, 1.0),
                      borderRadius: BorderRadius.circular(20)),
                  child: const Center(
                    child: Image(
                      image: AssetImage(
                        'images/Icon/Category.png',
                      ),
                      width: 30,
                      height: 30,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(
                    right: 20,
                  ),
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(245, 245, 245, 1.0),
                      borderRadius: BorderRadius.circular(20)),
                  child: const Center(
                    child: Image(
                      image: AssetImage(
                        'images/Icon/Notification.png',
                      ),
                      width: 30,
                      height: 30,
                    ),
                  ),
                ),
              ],
            ),
            Container(
              margin: EdgeInsets.only(left: 20, top: 20),
              alignment: Alignment.centerLeft,
              child: const Text(
                'Explore Quality Products!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
              ),
            ),
            Row(
              children: [
                Container(
                  margin: EdgeInsets.only(left: 20, top: 20),
                  color: Color.fromRGBO(245, 245, 245, 1.0),
                  width: MediaQuery.of(context).size.width - 90,
                  height: 50,
                  child: const TextField(
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.symmetric(horizontal: 15),
                      border: InputBorder.none,
                      hintText: 'Search Items',
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20),
                  padding: EdgeInsets.only(right: 20),
                  color: Color.fromRGBO(245, 245, 245, 1.0),
                  width: 50,
                  height: 50,
                  child: Center(
                    child: Image(
                      image: AssetImage('images/Icon/Search.png'),
                      height: 30,
                      width: 30,
                    ),
                  ),
                ),
              ],
            ),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              padding: EdgeInsets.only(left: 20, top: 20),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    height: 50,
                    child: Center(
                        child: Text(
                      'shirts',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                      ),
                    )),
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(51, 51, 51, 1.0),
                        borderRadius: BorderRadius.circular(15)),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    child: Center(
                        child: Text(
                      'Dress',
                      style: TextStyle(
                        fontSize: 20,
                        color: Color.fromRGBO(71, 71, 71, 1.0),
                      ),
                    )),
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                        borderRadius: BorderRadius.circular(15)),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    child: Center(
                        child: Text(
                      'Shoes',
                      style: TextStyle(
                        fontSize: 20,
                        color: Color.fromRGBO(71, 71, 71, 1.0),
                      ),
                    )),
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                        borderRadius: BorderRadius.circular(15)),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    child: Center(
                        child: Text(
                      'Jeack',
                      style: TextStyle(
                        fontSize: 20,
                        color: Color.fromRGBO(71, 71, 71, 1.0),
                      ),
                    )),
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                        borderRadius: BorderRadius.circular(15)),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    child: Center(
                        child: Text(
                      'shirts',
                      style: TextStyle(
                        fontSize: 20,
                        color: Color.fromRGBO(71, 71, 71, 1.0),
                      ),
                    )),
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                        borderRadius: BorderRadius.circular(15)),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    child: Center(
                        child: Text(
                      'shirts',
                      style: TextStyle(
                        fontSize: 20,
                        color: Color.fromRGBO(71, 71, 71, 1.0),
                      ),
                    )),
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                        borderRadius: BorderRadius.circular(15)),
                  ),
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  child: Column(
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.push(context,
                              MaterialPageRoute(builder: (context) {
                            return Details();
                          }));
                        },
                        child: Stack(children: [
                          Container(
                            margin: EdgeInsets.only(top: 20),
                            width: (MediaQuery.of(context).size.width - 60) / 2,
                            height: 300,
                            decoration: BoxDecoration(
                                // color: Colors.pink[200],
                                borderRadius: BorderRadius.circular(20)),
                            child: Image.asset(
                              'images/Image/full-length-portrait-cute-little-kid-boy-stylish-jeans-clothes-smiling-standing-white-kids-fashion-concept 1.png',
                              fit: BoxFit.fill,
                            ),
                          ),
                          Positioned(
                            bottom: 0,
                            child: Container(
                              width:
                                  (MediaQuery.of(context).size.width - 60) / 2,
                              height: 70,
                              decoration: BoxDecoration(
                                color: Color.fromRGBO(243, 240, 235, 1.0),
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(20),
                                  bottomRight: Radius.circular(20),
                                ),
                              ),
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: EdgeInsets.only(left: 15),
                                    child: Text(
                                      'Warm Jeans Shirts',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                  ),
                                  Container(
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Container(
                                          margin: EdgeInsets.only(
                                            left: 15,
                                          ),
                                          child: Text(
                                            '\$14.00',
                                            style: TextStyle(
                                                fontSize: 20,
                                                fontWeight: FontWeight.w600),
                                          ),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(right: 14),
                                          child: Image(
                                            image: AssetImage(
                                                'images/Icon/Arrow - Right 3.png'),
                                            width: 25,
                                            height: 25,
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            top: 40,
                            right: 18,
                            child: Container(
                              child: Image(
                                image: AssetImage('images/Icon/Heart（3）.png'),
                                height: 25,
                                width: 25,
                              ),
                            ),
                          )
                        ]),
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.push(context,
                              MaterialPageRoute(builder: (context) {
                            return Details();
                          }));
                        },
                        child: Stack(children: [
                          Container(
                            margin: EdgeInsets.only(top: 20),
                            width: (MediaQuery.of(context).size.width - 60) / 2,
                            height: 300,
                            decoration: BoxDecoration(
                                // color: Colors.pink[200],
                                borderRadius: BorderRadius.circular(20)),
                            child: Image.asset(
                              'images/Image/two-beautiful-girls-pastel 1.png',
                              fit: BoxFit.fill,
                            ),
                          ),
                          Positioned(
                            bottom: 0,
                            child: Container(
                              width:
                                  (MediaQuery.of(context).size.width - 60) / 2,
                              height: 70,
                              decoration: BoxDecoration(
                                color: Color.fromRGBO(243, 240, 235, 1.0),
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(20),
                                  bottomRight: Radius.circular(20),
                                ),
                              ),
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: EdgeInsets.only(left: 15),
                                    child: Text(
                                      'Warm Jeans Shirts',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                  ),
                                  Container(
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Container(
                                          margin: EdgeInsets.only(
                                            left: 15,
                                          ),
                                          child: Text(
                                            '\$14.00',
                                            style: TextStyle(
                                                fontSize: 20,
                                                fontWeight: FontWeight.w600),
                                          ),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(right: 14),
                                          child: Image(
                                            image: AssetImage(
                                                'images/Icon/Arrow - Right 3.png'),
                                            width: 25,
                                            height: 25,
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            top: 40,
                            right: 18,
                            child: Container(
                              child: Image(
                                image: AssetImage('images/Icon/Heart（3）.png'),
                                height: 25,
                                width: 25,
                              ),
                            ),
                          )
                        ]),
                      ),
                    ],
                  ),
                ),
                Column(
                  children: [
                    GestureDetector(
                      onTap: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return Details();
                        }));
                      },
                      child: Stack(children: [
                        Container(
                          margin: EdgeInsets.only(top: 40),
                          width: (MediaQuery.of(context).size.width - 60) / 2,
                          height: 300,
                          decoration: BoxDecoration(
                              // color: Colors.pink[200],
                              borderRadius: BorderRadius.circular(20)),
                          child: Image.asset(
                            'images/Image/full-length-portrait-cute-little-teen-girl-stylish-jeans-clothes-looking-camera-smiling-against-white-studio-wall-kids-fashion-concept 1.png',
                            fit: BoxFit.fill,
                          ),
                        ),
                        Positioned(
                          bottom: 0,
                          child: Container(
                            width: (MediaQuery.of(context).size.width - 60) / 2,
                            height: 70,
                            decoration: BoxDecoration(
                              color: Color.fromRGBO(243, 240, 235, 1.0),
                              borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(20),
                                bottomRight: Radius.circular(20),
                              ),
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Container(
                                  alignment: Alignment.centerLeft,
                                  margin: EdgeInsets.only(left: 15),
                                  // margin: EdgeInsets.only(top: 10),
                                  child: Text(
                                    'Warm Ladis Shirts',
                                    style: TextStyle(fontSize: 16),
                                  ),
                                ),
                                Container(
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        margin: EdgeInsets.only(
                                          left: 15,
                                        ),
                                        child: Text(
                                          '\$15.00',
                                          style: TextStyle(
                                              fontSize: 20,
                                              fontWeight: FontWeight.w600),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(right: 14),
                                        child: Image(
                                          image: AssetImage(
                                              'images/Icon/Arrow - Right 3.png'),
                                          width: 25,
                                          height: 25,
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          top: 60,
                          right: 18,
                          child: Container(
                            child: Image(
                              image: AssetImage('images/Icon/Heart（3）.png'),
                              height: 25,
                              width: 25,
                            ),
                          ),
                        )
                      ]),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return Details();
                        }));
                      },
                      child: Stack(children: [
                        Container(
                          margin: EdgeInsets.only(top: 20),
                          width: (MediaQuery.of(context).size.width - 60) / 2,
                          height: 300,
                          decoration: BoxDecoration(
                              // color: Colors.pink[200],
                              borderRadius: BorderRadius.circular(20)),
                          child: Image.asset(
                            'images/Image/pretty-young-boy-casual-clothes-white-wall-fashionable-posing-caucasian-male-preschooler-with-bright-facial-emotions-childhood-expression-having-fun-posing-crossed-hands 1.png',
                            fit: BoxFit.fill,
                          ),
                        ),
                        Positioned(
                          bottom: 0,
                          child: Container(
                            width: (MediaQuery.of(context).size.width - 60) / 2,
                            height: 70,
                            decoration: BoxDecoration(
                              color: Color.fromRGBO(243, 240, 235, 1.0),
                              borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(20),
                                bottomRight: Radius.circular(20),
                              ),
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Container(
                                  alignment: Alignment.centerLeft,
                                  margin: EdgeInsets.only(left: 15),
                                  // margin: EdgeInsets.only(top: 10),
                                  child: Text(
                                    'Warm Jeans Shirts',
                                    style: TextStyle(fontSize: 16),
                                  ),
                                ),
                                Container(
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        margin: EdgeInsets.only(
                                          left: 15,
                                        ),
                                        child: Text(
                                          '\$14.00',
                                          style: TextStyle(
                                              fontSize: 20,
                                              fontWeight: FontWeight.w600),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(right: 14),
                                        child: Image(
                                          image: AssetImage(
                                              'images/Icon/Arrow - Right 3.png'),
                                          width: 25,
                                          height: 25,
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          top: 40,
                          right: 18,
                          child: Container(
                            child: Image(
                              image: AssetImage('images/Icon/Heart（3）.png'),
                              height: 25,
                              width: 25,
                            ),
                          ),
                        )
                      ]),
                    ),
                  ],
                ),
              ],
            )
          ],
        ),
      ]),
    );
  }
}
